<template>
    <div class="about-container">
      <!-- 平台介绍 -->
      <div class="about-section platform-intro card-shadow">
        <div class="section-header">
          <h2>平台介绍</h2>
        </div>
        <div class="intro-content">
          <div class="intro-text">
            <h3>失物招领平台</h3>
            <p>
              "失物招领平台"是一个专为学校和社区设计的在线失物招领服务平台，致力于帮助用户快速找回丢失物品或归还拾得物品。
              我们以"连接每一份善意，传递每一份温暖"为使命，通过现代化的技术手段，提供便捷、高效的失物招领信息发布与查询服务。
            </p>
            <p>
              平台自上线以来，已成功帮助数千名用户找回贵重物品，得到了广大师生和社区成员的一致好评。
              我们不断优化用户体验，创新服务模式，力求打造最人性化、最高效的失物招领平台。
            </p>
          </div>
          <div class="intro-image">
            <img src="https://picsum.photos/600/400?random=1" alt="平台介绍" />
          </div>
        </div>
      </div>
  
      <!-- 使用数据 -->
      <div class="about-section statistics card-shadow">
        <div class="section-header">
          <h2>平台数据</h2>
        </div>
        <div class="statistics-grid">
          <div class="statistic-item">
            <div class="statistic-value">10,000+</div>
            <div class="statistic-label">注册用户</div>
          </div>
          <div class="statistic-item">
            <div class="statistic-value">5,000+</div>
            <div class="statistic-label">成功案例</div>
          </div>
          <div class="statistic-item">
            <div class="statistic-value">98.7%</div>
            <div class="statistic-label">用户满意度</div>
          </div>
          <div class="statistic-item">
            <div class="statistic-value">15+</div>
            <div class="statistic-label">合作学校</div>
          </div>
        </div>
      </div>
  
      <!-- 我们的优势 -->
      <div class="about-section advantages card-shadow">
        <div class="section-header">
          <h2>我们的优势</h2>
        </div>
        <div class="advantages-grid">
          <div class="advantage-item">
            <div class="icon-wrapper">
              <el-icon class="icon"><Search /></el-icon>
            </div>
            <h3>智能匹配</h3>
            <p>利用人工智能技术，自动匹配相似的失物和招领信息，提高找回成功率。</p>
          </div>
          <div class="advantage-item">
            <div class="icon-wrapper">
              <el-icon class="icon"><Location /></el-icon>
            </div>
            <h3>精准定位</h3>
            <p>支持详细的地理位置标记，帮助用户准确找到物品丢失或拾获的位置。</p>
          </div>
          <div class="advantage-item">
            <div class="icon-wrapper">
              <el-icon class="icon"><Lock /></el-icon>
            </div>
            <h3>安全保障</h3>
            <p>严格的隐私保护机制，确保用户个人信息和物品信息不被滥用。</p>
          </div>
          <div class="advantage-item">
            <div class="icon-wrapper">
              <el-icon class="icon"><MessageBox /></el-icon>
            </div>
            <h3>即时通讯</h3>
            <p>内置即时通讯功能，方便失主与拾得者直接沟通，加速物品找回过程。</p>
          </div>
        </div>
      </div>
  
      <!-- 留言反馈 -->
      <div class="about-section feedback-card card-shadow">
        <div class="section-header">
          <h2>留言反馈</h2>
        </div>
        
        <div class="feedback-content">
          <div class="feedback-icon-large">
            <el-icon><ChatDotRound /></el-icon>
          </div>
          
          <el-form class="feedback-form" label-position="top">
            <div class="form-row">
              <el-form-item label="您的姓名">
                <el-input placeholder="请输入您的姓名" />
              </el-form-item>
              
              <el-form-item label="联系邮箱">
                <el-input placeholder="请输入您的邮箱" />
              </el-form-item>
            </div>
            
            <el-form-item label="留言内容">
              <el-input type="textarea" rows="4" placeholder="请输入您的留言内容" />
            </el-form-item>
            
            <el-form-item class="submit-item">
              <el-button type="primary" class="submit-btn">
                <el-icon><Position /></el-icon>
                <span>提交留言</span>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { Search, Location, Lock, MessageBox, Message, Phone, Service, ChatDotRound, Position } from '@element-plus/icons-vue'
  </script>
  
  <style scoped lang="scss">
  .about-container {
    max-width: 1200px;
    min-width: $min-width;
    margin: 0 auto;
    padding: $spacing-huge;
    animation: fadeIn 0.6s ease;
    
    @media (max-width: 768px) {
      padding: $spacing-base;
    }
  }
  
  .about-section {
    background: white;
    border-radius: $border-radius-large;
    padding: $spacing-huge;
    margin-bottom: $spacing-huge;
    box-shadow: $card-shadow;
    transition: $transition-base;
  
    &:hover {
      box-shadow: $hover-shadow;
      transform: translateY(-2px);
    }
  
    @media (max-width: 768px) {
      padding: $spacing-large;
      margin-bottom: $spacing-large;
    }
  
    .section-header {
      margin-bottom: $spacing-large;
  
      h2 {
        font-size: 24px;
        background: $primary-gradient;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0;
        position: relative;
        display: inline-block;
        padding-bottom: $spacing-base;
  
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 50px;
          height: 3px;
          background: $primary-gradient;
          border-radius: $spacing-mini;
        }
        
        @media (max-width: 768px) {
          font-size: 20px;
          
          &:after {
            width: 40px;
            height: 2px;
          }
        }
      }
    }
  }
  
  .intro-content {
    display: flex;
    gap: $spacing-huge;
    align-items: center;
  
    @media (max-width: 992px) {
      gap: $spacing-large;
    }
  
    @media (max-width: 768px) {
      flex-direction: column-reverse;
    }
  
    .intro-text {
      flex: 1;
  
      h3 {
        font-size: 22px;
        color: $text-primary;
        margin-top: 0;
        margin-bottom: $spacing-base;
        
        @media (max-width: 768px) {
          font-size: 18px;
        }
      }
  
      p {
        color: $text-regular;
        line-height: 1.8;
        margin-bottom: $spacing-base;
        font-size: 16px;
        
        @media (max-width: 768px) {
          font-size: 14px;
          line-height: 1.6;
        }
      }
    }
  
    .intro-image {
      flex: 1;
      max-width: 50%;
  
      @media (max-width: 768px) {
        max-width: 100%;
        margin-bottom: $spacing-base;
      }
  
      img {
        width: 100%;
        border-radius: $border-radius-large;
        box-shadow: $card-shadow;
      }
    }
  }
  
  .advantages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: $spacing-large;
  
    @media (max-width: 1200px) {
      grid-template-columns: repeat(2, 1fr);
    }
  
    @media (max-width: 576px) {
      grid-template-columns: 1fr;
      gap: $spacing-base;
    }
  }
  
  .advantage-item {
    text-align: center;
    padding: $spacing-large;
    border-radius: $border-radius-base;
    transition: $transition-base;
    
    &:hover {
      background: #f8f9fa;
      transform: translateY(-5px);
    }
  
    .icon-wrapper {
      margin: 0 auto $spacing-base;
      width: 64px;
      height: 64px;
      background: linear-gradient(135deg, rgba(64, 158, 255, 0.1) 0%, rgba(54, 207, 201, 0.1) 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
  
      .icon {
        font-size: 30px;
        background: $primary-gradient;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      
      @media (max-width: 768px) {
        width: 56px;
        height: 56px;
        
        .icon {
          font-size: 24px;
        }
      }
    }
  
    h3 {
      font-size: 18px;
      margin-bottom: $spacing-small;
      color: $text-primary;
      
      @media (max-width: 768px) {
        font-size: 16px;
      }
    }
  
    p {
      color: $text-regular;
      line-height: 1.6;
      font-size: 14px;
      
      @media (max-width: 768px) {
        font-size: 13px;
      }
    }
  }
  
  .statistics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: $spacing-large;
  
    @media (max-width: 1200px) {
      grid-template-columns: repeat(2, 1fr);
    }
  
    @media (max-width: 576px) {
      grid-template-columns: 1fr;
      gap: $spacing-base;
    }
  }
  
  .statistic-item {
    text-align: center;
    padding: $spacing-large;
    border-radius: $border-radius-base;
    transition: $transition-base;
    
    &:hover {
      background: #f8f9fa;
    }
  
    .statistic-value {
      font-size: 36px;
      font-weight: 700;
      background: $primary-gradient;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: $spacing-mini;
      
      @media (max-width: 768px) {
        font-size: 28px;
      }
    }
  
    .statistic-label {
      color: $text-regular;
      font-size: 16px;
      
      @media (max-width: 768px) {
        font-size: 14px;
      }
    }
  }
  
  .feedback-card {
    overflow: hidden;
  }
  
  .feedback-content {
    position: relative;
    padding-top: $spacing-large;
  }
  
  .feedback-icon-large {
    position: absolute;
    top: -30px;
    right: 5%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: $primary-gradient;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(64, 158, 255, 0.3);
    z-index: 1;
    
    .el-icon {
      font-size: 36px;
      color: white;
    }
    
    @media (max-width: 768px) {
      width: 60px;
      height: 60px;
      top: -20px;
      right: 50%;
      transform: translateX(50%);
      
      .el-icon {
        font-size: 28px;
      }
    }
  }
  
  .feedback-form {
    position: relative;
    z-index: 0;
    
    &::before {
      content: '';
      position: absolute;
      top: -50px;
      right: -50px;
      width: 200px;
      height: 200px;
      background: linear-gradient(135deg, rgba(64, 158, 255, 0.05) 0%, rgba(54, 207, 201, 0.05) 100%);
      border-radius: 50%;
      z-index: -1;
    }
    
    &::after {
      content: '';
      position: absolute;
      bottom: -30px;
      left: -30px;
      width: 150px;
      height: 150px;
      background: linear-gradient(135deg, rgba(64, 158, 255, 0.05) 0%, rgba(54, 207, 201, 0.05) 100%);
      border-radius: 50%;
      z-index: -1;
    }
    
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: $spacing-large;
      
      @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: $spacing-base;
      }
    }
    
    :deep(.el-form-item__label) {
      font-weight: 500;
      color: $text-primary;
    }
    
    :deep(.el-input__wrapper) {
      box-shadow: none;
      border: 1px solid $border-color;
      border-radius: $border-radius-base;
      transition: $transition-base;
      background: #f9fafc;
      
      &:hover {
        border-color: var(--el-color-primary-light-3);
      }
      
      &.is-focus {
        border-color: var(--el-color-primary);
        box-shadow: 0 0 0 1px var(--el-color-primary-light-5);
      }
    }
    
    .submit-item {
      margin-top: $spacing-large;
      display: flex;
      justify-content: center;
      
      @media (max-width: 768px) {
        margin-top: $spacing-base;
      }
    }
    
    .submit-btn {
      background: $primary-gradient;
      border: none;
      padding: $spacing-small $spacing-huge;
      font-size: 16px;
      
      .el-icon {
        margin-right: $spacing-small;
      }
      
      &:hover {
        opacity: 0.9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
      }
      
      @media (max-width: 768px) {
        padding: $spacing-small $spacing-large;
        font-size: 14px;
      }
    }
  }
  
  .feedback-section {
    display: none;
  }
  
  .feedback-header {
    display: none;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  </style>